---
title: useBoolean
description: >-
  `useBoolean` is a custom hook used to manage boolean values using `on`, `off`,
  and `toggle` functions.
storybook: hooks-useboolean--basic
source: hooks/use-boolean
---

```tsx preview functional client
const [flg, { on, off, toggle }] = useBoolean()

return (
  <VStack>
    <Text>state: {String(flg)}</Text>

    <ButtonGroup.Root wrap="wrap">
      <ButtonGroup.Item onClick={on}>On</ButtonGroup.Item>
      <ButtonGroup.Item onClick={off}>Off</ButtonGroup.Item>
      <ButtonGroup.Item onClick={toggle}>Toggle</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)
```

## Usage

:::code-group

```tsx [package]
import { useBoolean } from "@yamada-ui/react"
```

```tsx [alias]
import { useBoolean } from "@/components/ui"
```

```tsx [monorepo]
import { useBoolean } from "@workspaces/ui"
```

:::

```tsx
const [flg, { on, off, toggle }] = useBoolean()
```

### Using Initial Values

```tsx preview functional client
const [flg, { on, off, toggle }] = useBoolean(true)

return (
  <VStack>
    <Text>state: {String(flg)}</Text>

    <ButtonGroup.Root wrap="wrap">
      <ButtonGroup.Item onClick={on}>On</ButtonGroup.Item>
      <ButtonGroup.Item onClick={off}>Off</ButtonGroup.Item>
      <ButtonGroup.Item onClick={toggle}>Toggle</ButtonGroup.Item>
    </ButtonGroup.Root>
  </VStack>
)
```
